<template>
  <div style="min-height: 500px; padding: 0 30px;">
    <h2>权限管理</h2>
    <div class="grayBoundTop20">

      <h3 class="subTitle">设置管理员</h3>
      <div>
        <el-transfer
          v-model="adminList"
          :data="userList"
          filterable
          :titles="['用户', '管理员']"
          :props="{
            key: 'id',
            label: 'name'
          }"
        ></el-transfer>
      </div>
      <div class="div-margin20" >
        <el-button type="primary" @click="saveAdmin" style="width: 100px">保存</el-button>
      </div>

    </div>

    <div class="grayBoundTop20">
      <h3 class="subTitle">其他设置...</h3>
    </div>

    <div class="div-margin20" ></div>
  </div>
</template>

<script>
  import {Transfer,Button} from 'element-ui';
  import * as api_role from '../../api/role';

  export default {
    props: {},
    components: {
      'el-transfer': Transfer,
      'el-button': Button
    },
    data() {
      return {
        adminList: [],
        userList: []
      }
    },
    methods: {
      saveAdmin(){
        let userIds = this.adminList.map(u => u);
        console.log(userIds);
        let form = new FormData();
        form.append('userIds', userIds);
        api_role.updateAdmins(form).then(()=>{
          this.$message.success('成功保存了信息！');
          this.getAllUser();
        }).catch(err=>{
          this.$message.error('保存管理员信息失败',err.errmsg);
        })
      },
      getAllUser() {
        api_role.getAll().then(data=>{
          this.userList = data;
          this.adminList = [];
          this.userList.forEach(u=>{
            if( u.privileges.indexOf('管理员') >= 0){
              this.adminList.push(u.id);
            }
          })
        }).catch(err=>{
          this.$message.error('获取用户信息失败: ',err.errmsg);
        })
      }
    },
    created() {

    },
    mounted() {
      this.getAllUser();
    }
  }
</script>

<style>
.subTitle{
  margin-top: 0;
}
</style>
